<template>
  <div class="order-body">
    <!-- header -->
    <shop-header>我的订单</shop-header>

    <div class="order-tabs">
      <ul>
        <li v-for="(tab, key) in tabs" :key="key" :class="{'is-tabs-active': (key === index)}" @click="changeTab(key)">
          <p>{{ tab }}</p>
          <p class="order-tabs-line"></p>
        </li>
      </ul>
    </div>
    <div style="height: 40px;"></div>
    <div class="order-list" v-if="index === 0">
      <order v-for="(item, key) in orderInfo" :statusText="statusText" :orderInfo="item" :key="key"></order>
    </div>
    <div class="order-list" v-else-if="index === 1">
      <order v-for="(item, key) in orderInfo" :statusText="statusText" :orderInfo="item" :key="key" v-if="item.status === 1"></order>
    </div>
    <div class="order-list" v-else-if="index === 2">
      <order v-for="(item, key) in orderInfo" :statusText="statusText" :orderInfo="item" :key="key" v-if="item.status === 5"></order>
    </div>
    <div class="order-list" v-else-if="index === 3">
      <order v-for="(item, key) in orderInfo" :statusText="statusText" :orderInfo="item" :key="key" v-if="item.status === 3"></order>
    </div>
    <div class="order-list" v-else-if="index === 4">
      <order v-for="(item, key) in orderInfo" :statusText="statusText" :orderInfo="item" :key="key" v-if="item.status === 4"></order>
    </div>

  </div>
</template>

<script>
import order from '../components/order';
import Header from '../components/header';
import {Indicator} from "mint-ui";
import request from "../utils/request";

export default {
  components: {
    order,
    shopHeader: Header,
  },
  data() {
    return {
      tabs: ['全部', '待发货', '发货中', '待收货', '已完成'],
      statusText: ['待付款', '待发货', '已取消', '待收货', '已完成', '发货中'],
      index: 0,
      orderInfo: [
        {
          id: 0,
          sn: '',
          status: 0,
          mainImage: '',
          productPrice: 0,
          productName: '',
          productNum: 0,
          orderPrice: 0,
        },
      ],

    }
  },
  async created() {
    let index = this.$route.query.index;
    this.index = parseInt(index || 0);
    Indicator.open();
    const res = await request({}, "/ajax/order/list");
    if(res && res.code == 0){
      Indicator.close();
      this.orderInfo = res.data;
    }
  },
  methods: {
    changeTab(key) {
      this.index = key;
    }
  },
}
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}
.order-body {
  min-height: 100vh;
  background-color: #F3F3F3;
  padding-bottom: 50px;
}
.order-tabs {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 48px;
  background-color: #fff;
  width: 100%;
}
.order-tabs > ul {
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  overflow: auto;
}
.order-tabs > ul > li {
  list-style: none;
  flex: 1;
  padding: 10px 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.order-tabs > ul > li.is-tabs-active {
  color: #F49D4D;
}
.order-tabs > ul > li.is-tabs-active > .order-tabs-line{
  width: 20%;
  height: 2px;
  background-color: #F49D4D;
  margin-top: 5px;
}
.order-list {
  padding: 10px 10px;
}
</style>
